<template>
  <div :data-title="title" v-title>
    <div class="archive-title">
      <span>{{archive}}</span>
    </div>
    <articlelist :queryOptions="queryOptions" />
  </div>
</template>

<script>
import articleList from '@/components/article/ArticleList'
export default {
  data () {
    return {
      archive: '全部',
      queryOptions: {
        year: '',
        month: '',
        category: '',
        tags: []
      },
      articles: []
    }
  },
  components: {
    'articlelist': articleList
  },
  watch: {
    $route (to, from) {
      if (to.path.includes('/archive/byDate/')) {
        this.setQueryOpetions()
      }
    }
  },
  computed: {
    title () {
      let path = this.$route.path
      if (path !== '/archive/archives' && path.includes('/archive/byDate')) {
        let { year, month } = this.$route.params
        return `${year}年${month}月 - 文章归档 -MBlog`
      } else {
        return '全部 - 文章归档 - MBlog'
      }
    }
  },
  created () {
    this.setQueryOpetions()
  },
  methods: {
    setQueryOpetions () {
      let path = this.$route.path
      if (path.includes('/archive/byDate/')) {
        let year = this.$route.params.year
        let month = this.$route.params.month
        this.archive = `${year}年${month}月`
        this.queryOptions.year = year
        this.queryOptions.month = month
      }
    }
  }
}
</script>
<style>
.archive-title {
  line-height: 20px;
  text-align: left;
  padding-bottom: 5px;
}
</style>
